<template>
<div>
  <div class="activity" ref="activity">
  <div class="registered-activity">
    <div v-if="activityList.length==0">暂未参与活动</div>
    <div class="registered-activity-list" v-for="(item,index) in activityList" :key="index" @click="toActivityDetail(item.activity_id)">
      <template v-if="item.activity_info">
        <div class="registered-activity-list-left">
        <img :src="item.activity_info.img_url">
      </div>
      <div class="registered-activity-list-right">
        <div class="registered-activity-name">{{item.activity_info.name}}啊手动阀手动阀手动阀地方撒打发打发</div>
        <div class="registered-activity-start">开始时间&nbsp;{{item.activity_info.start_time}}</div>
        <div class="registered-activity-start">结束时间&nbsp;{{item.activity_info.end_time}}</div>
        <div class="people-num">已报名人数:{{item.join_num}}</div>
      </div>
      </template>
    </div>
  </div>
</div>
</div>
  
</template>

<script>
import BScroll from 'better-scroll';
    export default {
        name: "index",
      data(){
        return {
          rightScroll:'',
          activityList:[],
          limit: "10",
          page: "1",
          userToken: null,
        }
      },
      watch: {
        activityList(){
          this.rightScroll.refresh()
        }
      },
      mounted(){
        this.reqUserJoinActivity();
        this.initScroll()
      },
      methods: {
        async reqUserJoinActivity() {
          let params = {

            limit: this.limit,
            page: this.page,
          }
          let res = await this.$api.getUserJoinActivity(params);
          if (res.level == "success") {
            this.activityList = [...this.activityList,...res.data];
          }
        },
        // //跳转到活动详情
        toActivityDetail(activity){
          console.log(activity)
          this.$router.push({
            name:'ActivityDetail',
            query:{
              id: activity
            }
          })
        },
        initScroll(){
        this.$nextTick(() => {
          this.rightScroll = new BScroll(this.$refs.activity, {
            scrollY: true,
            scrollX: false,
            mouseWheel: true,
            click: true,
            taps: true,
            pullUpLoad: {
              threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
            }
          });

          this.rightScroll.on('pullingUp', () => {
                  this.page++;
                  this.reqUserJoinActivity()
                  this.rightScroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
              })
        });
      }
      }
    }
</script>

<style lang="scss" scoped>
.activity{
  max-height: 100vh;
}
  .registered-activity{
    margin-top: 20px;
    padding: 0 20px;
    .registered-activity-list{
      display: flex;
      font-size: 28px;
      margin-bottom: 30px;
      .registered-activity-list-left{
        width: 300px;
        height: 180px;
        overflow: hidden;
        border-radius: 12px;
        
        img{
          width: 100%;
          border-radius: 12px;
        }

      }
      .registered-activity-list-right{
        text-align: left;
        flex: 2;
        padding-left: 20px;
        div{
          height: 45px;
          line-height: 45px;
        }
        .registered-activity-name{
          width: 320px;
          line-height: 44px;
          display: -webkit-box;
        /*! autoprefixer: off */
            -webkit-box-orient: vertical
            /* autoprefixer: on */;
            -webkit-line-clamp: 2;
            overflow: hidden;
          color: #666;
          text-align: left;
        }
        .registered-activity-start,.people-num{
          margin-top:10px;
          font-size: 24px;
          color: #979696;
          height: 44px;
          text-align: left;
          line-height: 44px;
        }
        .registered-activity-num{
          font-size: 24px;
          color: #979696;
          height: 44px;
          line-height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
</style>
